import React, { Component } from 'react';
import { NavBar, Carousel, Flex } from 'antd-mobile'
import SearchInput from '../searchInput/SearchInput'
import './Index.scss'
import { withRouter } from 'react-router-dom'
import myaxios from '../../utils/myaxios'

class Index extends Component {
    state = {
        swiper_list: [],
        imgHeight: 170,
        catitems: [],  /* 分页导航的数据 */
        productData:[]
    }
    // 点击轮播图事件
    handleSwiperClick = (goods_id) => {
        this.props.history.push('/goodDetail/' + goods_id);
    }
    // 点击分页导航
    handleCatItemClick = (params) => {
        this.props.history.push('/category');
    }
    //    图片列表点击
    handleImgClick = () => {
        this.props.history.push("/goodList?"+"query='服装");
    }




    componentDidMount() {
        // 轮播数据
        myaxios
            .get('home/swiperdata')
            .then((res) => {
                this.setState({
                    swiper_list: res,
                })
            }
            )
            .catch((err) => console.log(err));
        // 导航数据
        myaxios.get('/home/catitems').then(res => {
            this.setState({
                catitems: res
            })
        })
        // 图片列表
        myaxios.get('/home/floordata').then(res => {
            this.setState({
                productData: res
            })
        })
    }
    render() {
        return (
            <div className="yg-index">
                {/* 导航条开始 */}
                <div className="yg-index-nav">
                    <NavBar className="index-nav">优购商城</NavBar>
                </div>
                {/* 导航条结束 */}
                {/* 搜索框 */}
                <div className="yg-index-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索框 */}
                {/* 轮播图 */}
                <div className="yg-index-swiper">                                        <Carousel
                    autoplay={true}
                    infinite
                >
                    {this.state.swiper_list.map((val) => (

                        <div onClick={this.handleSwiperClick.bind(this, val.goods_id)} key={val.goods_id} style={{
                            display: 'inline-block',
                            width: '100%',
                            height: this.state.imgHeight,
                        }}>
                            <img
                                src={val.image_src}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </div>
                    ))}
                </Carousel>
                </div>
                {/* 轮播图 */}
                {/* 分页导航 */}
                <div className="yg-index-catitems">
                    <div className="catitems-item">
                        <Flex>
                            {this.state.catitems.map(v => {
                                return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                                    <img src={v.image_src} alt="" />
                                </Flex.Item>
                            })}
                        </Flex>
                    </div>
                </div>
                {/* 分页导航 */}
                {/* 图片列表 */}
                <div className="yg-index-productData">
                    {this.state.productData.map(v => {
                        return <div key={v.floor_title.image_src} className='productData-item'>
                            <div className="product_title">
                                <img src={v.floor_title.image_src} alt="" />
                            </div>
                            <div className="product-image-list">
                                {
                                    v.product_list.map(vv => {
                                        return <div className='image-list-item' key={vv.image_src} onClick={this.handleImgClick}>
                                            <img src={vv.image_src}alt="" />
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    })}
                </div>

                {/* 图片列表 */}


            </div>

        );
    }
}

export default withRouter(Index);
